<template>
  <div class="form-con">
    <el-form
      :model="formData"
      label-position="left"
      label-width="1.5rem"
      class="tb-form-inline"
    >
      <!-- <el-form-item label="任务名称：">
        <el-input
          v-model="formData.jobName"
          :style="{ width: '5.3rem' }"
          placeholder="请输入"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="组名：">
        <el-input
          v-model="formData.jobGroup"
          :style="{ width: '5.3rem' }"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="newEntityComp()">
          新增实体
        </el-button>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in entityLists"
        :key="'entityComp - ' + index"
      >
        <ZiduanCheckAndSelect
          :ref="'ZiduanCheckAndSelect' + index"
          :id="item.id"
          :initialFormData="item"
          @formDataChanged="handleFormDataChange"
          @deleteEntityComp="deleteEntityComp"
        />
      </el-form-item>

      <el-form-item label="执行频率：">
        <div style="display: flex">
          <el-input
            :style="{ width: '2.4rem' }"
            v-model="formData.timeCount"
            type="number"
            placeholder="请输入"
          ></el-input>
          <el-select
            v-model="formData.timeType"
            placeholder="请选择"
            style="margin-left: 0.2rem"
            :style="{ width: '2.7rem' }"
          >
            <el-option label="天" value="day"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="是否单次执行：">
        <el-select
          v-model="formData.isOne"
          placeholder="请选择"
          :style="{ width: '5.3rem' }"
        >
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务描述：">
        <el-input
          type="textarea"
          :style="{ width: '5.3rem' }"
          v-model="formData.jobDescribe"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item>
        <el-button type="info" @click="onSubmit">
          重置
        </el-button>
        <el-button type="primary" @click="onSubmit">
          查询
        </el-button>
      </el-form-item> -->
      <!-- <el-form-item>
        <el-button
          type="primary"
          style="width: 1.4rem; height: 0.48rem"
          icon="el-icon-plus"
          >新增任务</el-button
        >
      </el-form-item> -->
    </el-form>
  </div>
</template>
  
<script>
import ZiduanCheckAndSelect from "./ZiduanCheckAndSelect.vue";
export default {
  components: {
    ZiduanCheckAndSelect,
  },
  computed: {},
  data: () => {
    return {
      formData: {
        // jobName: "",
        jobGroup: "",
        jobDescribe: "",
        timeCount: "",
        timeType: "",
        isOne: false,
      },
      entityTypeList: [],
      checkboxOptions: [],
      fieldOptions: [],
      entityLists: [],
    };
  },
  mounted() {},
  methods: {
    handleFormDataChange(newFormData, id) {
      // console.log("33333333");
      this.entityLists[id] = newFormData;
    },
    // 删除实体组件
    deleteEntityComp(id) {
      const index = this.entityLists.findIndex((item) => item.id === id);

      if (index !== -1) {
        console.log("删除前：" + JSON.stringify(this.entityLists));
        this.entityLists.splice(index, 1); // 删除对应的子项
        console.log("删除后：" + JSON.stringify(this.entityLists));
      } else {
        console.log("No entity found with the given timestamp"); // 未找到对应项处理
      }
    },
    // 新增实体组件
    newEntityComp() {
      // let no = this.entityLists.length;
      const timestamp = new Date().getTime();
      let id = timestamp;
      console.log("44444444");
      this.entityLists.push({
        id: id,
      }); // 向数组添加一个新元素
    },
    // 获取实体类型
    // getStType(name) {
    //   getEntityTypes({
    //     chineseName: name,
    //   })
    //     .then((res) => {
    //       this.entityTypeList = res;
    //     })
    //     .catch((err) => {});
    // },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
  
  <style lang="less" scoped>
@formheight: 0.36rem;
.form-con {
  display: block;
  .tb-form-inline {
    text-align: left;
    height: @formheight; /* 设置 Form 高度 */
    :deep(.el-input__inner),
    :deep(.el-form-item__label),
    :deep(.el-form-item__content) {
      // height: @formheight;
      line-height: @formheight;
      font-family: SourceHanSansCN;
      font-weight: 400;
      font-size: 0.18rem;
    }
    // :deep(.el-button) {
    //   width: 1rem;
    //   height: @formheight;
    //   line-height: @formheight;
    //   padding: 0;
    // }

    :deep(.el-form-item__label) {
      float: left !important;
    }
    :deep(.el-button--primary) {
      background: linear-gradient(90deg, #3364fe 0%, #5f9afe 100%);
      border-radius: 0.04rem;
      border-color: transparent;
    }
  }
}
</style>
  